<template>
  <div class="container">
    <div class="logo">
      <h1 class="logo_h">宠</h1>
      <div class="img">
        <img class="img_log1" src="../assets/images/7.png" alt="猫咪">
      </div>
      <h1 class="logo_h">爱</h1>
    </div>
    <form class="form">
      <div class="input-text clearFix">
        <span class="pwd">账号:</span>
        <input type="text" placeholder="请输入账号" v-model="adminphone" />
      </div>
      <div class="input-text clearFix">
        <span class="pwd">密码:</span>
        <input type="password" placeholder="请输入密码" v-model="adminpsw" />
      </div>
      <div class="setting clearFix">
        <label class="checkbox inline">
          <input class="check" type="checkbox" checked="" />
          <span class="autlog">自动登录</span>
        </label>
        <span class="forget">忘记密码？</span>
      </div>
    </form>
    <button class="btn_logoin" @click="adlogin">
      登&nbsp;&nbsp;录
    </button>
    <!-- <div class="call clearFix">
        没有账号，
        <div class="link">
          <router-link class="MyRegister" to="/myregister">立即注册</router-link>
        </div>
        </div> -->
  </div>
</template>
<script>
  import axios from 'axios';
  //import { Result } from 'element-ui';
  export default {
    name: "adLogin",
    data() {
      return {
        // UserID:this.$route.params.UserAccount,
        adminphone: this.$route.params.adminphone,
        adminpsw: '',
        aid: ''
      }
    },
    methods: {
      //登录的回调函数
      adlogin() {
        let p = {
          adminphone: this.adminphone,
          adminpsw: this.adminpsw,
        }
        console.log(p.adminphone)
        console.log(p.adminpsw)
        this.$axios.get("http://localhost:3000/api/adlog", { params: p }).then(res => {
          console.log(res)
          if (this.adminpsw == '') {
            this.$message({
              type: 'error',
              message: '请输入密码'
            })
          }
          if (this.adminphone == '') {
            this.$message({
              type: 'error',
              message: '请输入账号'
            })
          }
          if (res.data[0].adminpsw === this.adminpsw) {
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            console.log("密码正确");

            //获取用户ID
            let ad_id = res.data[0].aid
            var storage = window.localStorage;
            storage.setItem('aId', ad_id);
            console.log("Aid:", res.data[0].aid);

            //路由跳转
            // this.$router.push({name:'home',query:{uId:res.data[0].Uid}})
            this.$router.push({ name: 'menu', query: { aId: ad_id } })
          }
          else {
            this.$message({
              type: 'failure',
              message: '登录失败，密码错误'
            })
          }
        })
        .catch(err=>{
          console.log(err);
        })
      }
    }
  }
</script>
<style scoped>
  .container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    border-top: none;
    /* margin:auto 10%; */
    background-color: #324057;
    opacity: 0.8;
    /* background-image: url('../assets/images/6.png'); */
    /* padding-bottom: 2%; */
  }

  .logo {
    text-align: center;
    font-family: 微软雅黑;
    width: 80%;
    height: 22px;
    margin-left: 10%;
    display: inline-block;
  }

  .img_log1 {
    width: 70%;
    height: 130%;
    display: inline-block;
  }

  .img {
    width: 10%;
    height: 120%;
    line-height: 32px;
    display: inline-block;
  }

  .logo_h {
    display: inline-block;
  }

  form {
    margin-left: 8%;
    font-size: 12px;
    line-height: 18px;
    width: 100%;
  }

  .input-text {
    margin: 5% 18%;
  }

  .pwd {
    font-size: 18px;
    line-height: 36px;
    font-family: 微软雅黑;
    float: left;
    width: 80px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 2px 0 0 2px;
    margin-left: 10%;
  }

  input {
    width: 270px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 14px;
    line-height: 22px;
    margin: auto 2%;
    border-radius: 0 2px 2px 0;
    outline: none;
  }

  .setting {
    margin-left: 21%;
  }

  .check {
    float: left;
    font-size: 30px;
    line-height: 22px;
    font-family: 微软雅黑;
    width: 20px;
  }

  .setting .forget {
    float: right;
    font-size: 16px;
    line-height: 28px;
    font-family: 微软雅黑;
    margin-right: 46%;
    margin-top: 3px;
  }

  .setting .autlog {
    float: left;
    font-size: 16px;
    line-height: 28px;
    font-family: 微软雅黑;
    margin-top: 3px;
  }

  .btn_logoin {
    background-color: #e1251b;
    padding: 6px;
    border-radius: 0;
    font-size: 16px;
    font-family: 微软雅黑;
    word-spacing: 4px;
    border: 1px solid #e1251b;
    color: #fff;
    width: 27%;
    height: 36px;
    margin-top: 25px;
    /* margin-left: 8%; */
    outline: none;
  }

  .btn_logoin:hover {
    background-color: rgb(233, 175, 99);
  }

  .call {
    display: inline-block;
    margin-left: 74%;
  }

  .link {
    display: inline-block;
  }

  .MyRegister {
    float: right;
    font-size: 20px;
  }

  .MyRegister:hover {
    color: #4cb9fc;
    text-decoration: underline;
  }
</style>